@import './variables.scss';

// 重置样式
page {
  font-size: $font-size-base;
  color: $text-color;
  background-color: $background-color;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
}

// 通用样式
.container {
  min-height: 100vh;
  box-sizing: border-box;
}

.flex-center {
  @include flex-center;
}

.flex-between {
  @include flex-between;
}

// 文本样式
.text-primary {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.text-info {
  color: $info-color;
}

.text-secondary {
  color: $text-color-secondary;
}

.text-light {
  color: $text-color-light;
}

.text-ellipsis {
  @include text-ellipsis;
}

// 背景样式
.bg-primary {
  background-color: $primary-color;
}

.bg-success {
  background-color: $success-color;
}

.bg-warning {
  background-color: $warning-color;
}

.bg-danger {
  background-color: $danger-color;
}

.bg-info {
  background-color: $info-color;
}

.bg-white {
  background-color: $background-color-white;
}

// 边距样式
.m-0 { margin: 0; }
.m-1 { margin: $spacing-mini; }
.m-2 { margin: $spacing-small; }
.m-3 { margin: $spacing-base; }
.m-4 { margin: $spacing-large; }
.m-5 { margin: $spacing-xl; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: $spacing-mini; }
.mt-2 { margin-top: $spacing-small; }
.mt-3 { margin-top: $spacing-base; }
.mt-4 { margin-top: $spacing-large; }
.mt-5 { margin-top: $spacing-xl; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: $spacing-mini; }
.mb-2 { margin-bottom: $spacing-small; }
.mb-3 { margin-bottom: $spacing-base; }
.mb-4 { margin-bottom: $spacing-large; }
.mb-5 { margin-bottom: $spacing-xl; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: $spacing-mini; }
.ml-2 { margin-left: $spacing-small; }
.ml-3 { margin-left: $spacing-base; }
.ml-4 { margin-left: $spacing-large; }
.ml-5 { margin-left: $spacing-xl; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: $spacing-mini; }
.mr-2 { margin-right: $spacing-small; }
.mr-3 { margin-right: $spacing-base; }
.mr-4 { margin-right: $spacing-large; }
.mr-5 { margin-right: $spacing-xl; }

.p-0 { padding: 0; }
.p-1 { padding: $spacing-mini; }
.p-2 { padding: $spacing-small; }
.p-3 { padding: $spacing-base; }
.p-4 { padding: $spacing-large; }
.p-5 { padding: $spacing-xl; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: $spacing-mini; }
.pt-2 { padding-top: $spacing-small; }
.pt-3 { padding-top: $spacing-base; }
.pt-4 { padding-top: $spacing-large; }
.pt-5 { padding-top: $spacing-xl; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: $spacing-mini; }
.pb-2 { padding-bottom: $spacing-small; }
.pb-3 { padding-bottom: $spacing-base; }
.pb-4 { padding-bottom: $spacing-large; }
.pb-5 { padding-bottom: $spacing-xl; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: $spacing-mini; }
.pl-2 { padding-left: $spacing-small; }
.pl-3 { padding-left: $spacing-base; }
.pl-4 { padding-left: $spacing-large; }
.pl-5 { padding-left: $spacing-xl; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: $spacing-mini; }
.pr-2 { padding-right: $spacing-small; }
.pr-3 { padding-right: $spacing-base; }
.pr-4 { padding-right: $spacing-large; }
.pr-5 { padding-right: $spacing-xl; }

// 圆角样式
.radius-small {
  border-radius: $border-radius-small;
}

.radius-base {
  border-radius: $border-radius-base;
}

.radius-large {
  border-radius: $border-radius-large;
}

.radius-circle {
  border-radius: $border-radius-circle;
}

// 阴影样式
.shadow {
  box-shadow: $box-shadow;
}

.shadow-light {
  box-shadow: $box-shadow-light;
}

.shadow-dark {
  box-shadow: $box-shadow-dark;
}

// 安全区适配
.safe-area-bottom {
  @include safe-area-bottom;
}

// 分割线
.hairline {
  @include hairline-bottom;
}

.hairline-top {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: $border-color;
    transform: scaleY(0.5);
  }
}

.hairline-bottom {
  @include hairline-bottom;
}

// 按钮样式
.btn {
  @include flex-center;
  height: 44px;
  padding: 0 $spacing-base;
  font-size: $font-size-base;
  border-radius: $border-radius-base;
  transition: opacity $animation-duration-base;

  &:active {
    opacity: 0.8;
  }

  &--primary {
    color: #fff;
    background: $primary-color;
  }

  &--default {
    color: $text-color;
    background: #fff;
    border: 1px solid $border-color;
  }

  &--block {
    display: block;
    width: 100%;
  }
}

// 卡片样式
.card {
  margin: $spacing-base;
  padding: $spacing-base;
  background: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
}

// 列表样式
.list {
  background: #fff;

  &__item {
    @include flex-between;
    padding: $spacing-base;
    @include hairline-bottom;

    &:last-child::after {
      display: none;
    }
  }
}

// 标签样式
.tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: $font-size-mini;
  border-radius: $border-radius-small;

  &--primary {
    color: $primary-color;
    background: rgba($primary-color, 0.1);
  }

  &--success {
    color: $success-color;
    background: rgba($success-color, 0.1);
  }

  &--warning {
    color: $warning-color;
    background: rgba($warning-color, 0.1);
  }

  &--danger {
    color: $danger-color;
    background: rgba($danger-color, 0.1);
  }
}

// 价格样式
.price {
  color: $danger-color;
  font-weight: bold;

  &::before {
    content: '¥';
    font-size: 0.8em;
  }
}

// 加载状态
.loading {
  @include flex-center;
  padding: $spacing-base;
  color: $text-color-secondary;
  font-size: $font-size-small;
}

// 空状态
.empty {
  @include flex-center;
  flex-direction: column;
  padding: $spacing-xl 0;
  color: $text-color-secondary;

  &__icon {
    font-size: 48px;
    margin-bottom: $spacing-base;
  }

  &__text {
    font-size: $font-size-small;
  }
} 